<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../css/student.css">
<link rel="stylesheet" href="../css/header.css">

<body style="background: url('../img/bg-min.jpg');background-size: cover;">
    <div id="app5">
        <div class="header">
            <div class="logo">
                <img src="../logo.png" alt />
                <h1>学生课程管理系统</h1>
            </div>
            <el-menu class="el-menu-nav" mode="horizontal" @select="handleSelect" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b" router>
                <el-submenu>
                    <template slot="title">个人信息</template>
                    <el-menu-item @click="toMember">测试1</el-menu-item>
                </el-submenu>
                <el-menu-item>
                    <el-badge class="item" type="warning">查看课程</el-badge>
                </el-menu-item>
                <el-menu-item>
                    <el-badge class="item">我要选课</el-badge>
                </el-menu-item>
                <!-- </el-menu-item> -->
            </el-menu>
            <div class="line"></div>
        </div>
        <div class="main">
            <div class="leftMenu" style="width: 180px;">
                <el-row class="tac" style="width: 180px;">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="1">
                            <i class="el-icon-setting"></i>
                            <span slot="title">课程列表</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-setting"></i>
                            <span slot="title">我的课程表</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-setting"></i>
                            <span slot="title">个人信息</span>
                        </el-menu-item>
                    </el-menu>
                </el-row>
            </div>
            <div class="rightMenu subject-state">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="mobile" label="电话">
                    </el-table-column>
                    <el-table-column prop="idcard" label="身份证号码">
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>

</body>
<script>
    var app5 = new Vue({
        el: '#app5',
        data: {
            tableData: [{ name: '测试', sex: '男', mobile: '1234567890', idcard: '1111111111' }]
        },
        methods: {
            toMember: function () {
                window.location.href = "member.html"
            },
            getStudentList: function () {

            }
        }
    });
</script>

</html>